<?php
$this->load->view('header1');
?>
<style>
    body{
        background-color: rgb(242,242,242);
    }
    #login_div {
        float: left;
        //height: 100%;
        width: 40%;
        alignment-adjust: central;
        padding-top: 100px;

    }
    #login_div label{
        text-transform: uppercase;
        font-family: 'Maiandra GD','Franklin Gothic Book','arial black';
        font-size: 20;
        font-weight: bold;
        text-align: left;
        margin-bottom: 2px;
        margin-top: 2px;
    }

    .text_field{
        background-color: rgb(179,179,179);
        width: 300px;
        height: 40px;
        margin-bottom: 9px;
        margin-top: 9px;
        font-family: arial;
        font-weight: bold;
        //color: whitesmoke;
        font-size: large;
    }

    .login_footer{
        text-align: center;
    }
    .login_body{
        min-width: 1000px; 
        min-height: 400px;
        padding-top: 80px;
        padding-left: 100px;
    }
    .tombol_login{
        background-image: url("./assets/gambar/tombol_login.png");
        background-size: 100% auto;
        min-width: 100px;
        min-height: 100px;
        border: medium none;
        margin-left: 100px;
        margin-top: 40px;
    }
</style>
<body>
    <div class="container-fluid" style="width: 1100">
        <div class="row" style="padding-top: 40px">
            <div class="col-sm-9 ">
                <img src="<?php echo base_url(); ?>assets/gambar/login1.png" style="height: 500px">
            </div>
            <div class="col-sm-3" style="padding-top: 100px">
                <form action="<?php echo base_url(); ?>login/doLogin" method="post" onsubmit="return coba_login()">
                    <label>Username</label>
                    <div id="pesan_username" style="display:none">Username tidak terdaftar</div>
                    <div>
                        <input type="text" name="username" id="username" class="text_field" placeholder="masukkan username"/>
                    </div>
                    <label>Password</label>
                    <div id="pesan_password" style="display:none">Password tidak cocok</div>
                    <div>
                        <input type="password" name="password" id="password" class="text_field" placeholder="masukkan kata sandi"/>
                    </div>
                    <input type="submit" class="tombol_login" value=""/>
                </form>
            </div>
        </div>
        <div class="row" style="padding-top: 50px">
            <div class="login_footer">
                <img src="<?= base_url() ?>assets/gambar/logo_telkom.png" width="100px"/>
            </div>
        </div>
    </div>

</body>
<script>
    var pesan_username = document.getElementById('pesan_username');
    var pesan_password = document.getElementById('pesan_password');
    function coba_login() {
        pesan_username.style.display = 'none';
        pesan_password.style.display = 'none';
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        $.ajax({
            url: "<?= base_url() ?>login/doLogin",
            type: "post",
            data: {username: username, password: password, reqType: 'json'},
            success: function(response) {
                console.log(response);
                var json = jQuery.parseJSON(response);
                if (json.r == 'ok') {
                    window.location = json.next;
                } else if (json.r == 'no') {
                    var reason = json.reason;
                    if (reason == '2') {//username tidak ditemukan
                        console.log('pesna username');
                        pesan_username.style.display = 'table';
                    } else if (reason == '3') {//password tidak cocok
                        console.log('pesna password');
                        pesan_password.style.display = 'table';
                        pesan_password.innerHTML = "Password tidak cocok";
                    }
                }
            },
            error: function() {
                pesan_password.style.display = 'table';
                pesan_password.innerHTML = "Kesalahan dalam komunikasi jaringan";
                
            }
        });
        return false;
    }
</script>
</html>